<template>
  <div class="sugest">
    <h3 @click="$emit('changekeyword', keyword)">搜索“{{ keywords }}”</h3>
    <ul>
      <li
        v-for="s in sugArray"
        :key="s.id"
        @click="$emit('changekeyword', s.keyword)"
      >
        <i class="fa fa-search" aria-hidden="true"></i>
        <span>{{ s.keyword }}</span>
      </li>
    </ul>
  </div>
</template>

<script>
import _ from 'lodash'
export default {
  props: {
    keywords: String,
  },
  data() {
    return {
      sugArray: [],
    };
  },
  // watch:{
  //     keywords(newValue){
  //         this.axios.get(`/search/suggest?keywords=${newValue}&type=mobile`)
  //         .then(result=>{
  //             // console.log(result);
  //             this.sugArray=result.data.result.allMatch
  //         })
  //     }
  // },
  methods: {
    // getSearch(value) {
    //   this.axios
    //     .get(`/search/suggest?keywords=${value}&type=mobile`)
    //     .then((result) => {
    //       // console.log(result);
    //       this.sugArray = result.data.result.allMatch;
    //     });
    // },
    getSearch: _.debounce(function (value) {
      this.axios
        .get(`/search/suggest?keywords=${value}&type=mobile`)
        .then((result) => {
          this.sugArray = result.data.result.allMatch;
        });
    }, 100),
  },
  created() {
    this.getSearch(this.keywords);
  },
  //好像可以不要了
  // watch: {
  //     keywords(newValue) {
  //         this.getSearch(newValue)
  //     },
  // },
};
</script>

<style lang="less" scoped>
.sugest {
  padding: 10px 10px;
  h3 {
    font-size: 14px;
    color: #507daf;
  }
  ul {
    li {
      line-height: 45px;
      font-size: 15px;
      color: #333;
      border-bottom: 1px solid #ebecec;
      i {
        color: #c9c9c9;
      }
      span {
        padding-left: 10px;
      }
    }
  }
}
</style>